<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui" xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
    <f:view contentType="text/html">
        <h:head>
            <f:facet name="first">
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>Hyper Mongo</title>
            </f:facet>
        </h:head>
        <style>
            .ui-widget {
                font-size: 12px;
            }

            .ui-layout-north {                    
                overflow:hidden !important;
            }
        </style>

        <h:body>

            <p:layout fullPage="true">
                <p:growl  id="messages" showDetail="true" autoUpdate="true"  globalOnly="true"/>

                <p:layoutUnit position="north"  size="50" resizable="false">
                    <h:form id="tabMenu">
                        <p:tabMenu activeIndex="#{menuBean.currentMenu.id}">  
                            <c:forEach items="#{menuBean.menus}" var="nodeMenu">
                                <p:menuitem value="#{nodeMenu.title}" url="#{nodeMenu.url}" icon="#{nodeMenu.icon}"/>  
                            </c:forEach>
                        </p:tabMenu>  
                    </h:form>
                </p:layoutUnit>

                <p:layoutUnit position="west" size="150" header="Databases" collapsible="true">
                    <h:form>
                        <h:commandButton action="login" value="Page1" />
                    </h:form>
                    <h:form id="treeForm">  
                        <p:contextMenu for="tree" nodeType="collectionNode">  
                            <p:menuitem value="View" update=":form:myDatatable" actionListener="#{lazyTableBean.generateTable()}"  onsuccess="datatable.getPaginator().setPage(0);" icon="ui-icon-search" />  
                        </p:contextMenu>

                        <p:contextMenu for="tree" nodeType="databaseNode">  
                            <p:menuitem value="Statistics" actionListener="#{mainController.showDatabaseStatistics()}" icon="ui-icon-search" />  
                            <p:menuitem value="Drop" onclick="myConfirm.show();" icon="ui-icon-trash" />  
                        </p:contextMenu>  


                        <p:confirmDialog message="Are you sure?" header="Delete " severity="ui-icon-alert" global="true" widgetVar="myConfirm">  
                            <p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" actionListener="#{mainController.dropDatabase}"/>  
                            <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close"/>       
                        </p:confirmDialog> 


                        <p:tree  value="#{mainController.root}" var="node" dynamic="true" cache="false"  
                                 selectionMode="single"  selection="#{mainController.selectedNode}" id="tree">  

                            <p:ajax event="select" listener="#{mainController.onNodeSelect}" />   

                            <p:treeNode type="databaseNode" icon="ui-icon-disk">  
                                <h:outputText value="#{node}"/>  
                            </p:treeNode>  

                            <p:treeNode type="collectionNode" icon="ui-icon-note">  
                                <h:outputText value="#{node}"/>  
                            </p:treeNode>  
                        </p:tree>  
                    </h:form>  
                </p:layoutUnit>

                <p:layoutUnit position="center">
                    <h:form id="form">  
                        <p:contextMenu for="myDatatable">  
                            <p:menuitem value="View"  icon="ui-icon-search" update=":form:display  :form:orjinalShowedObject" oncomplete="PF('dataViewDialog').show()"/>  
                            <p:menuitem value="Delete" icon="ui-icon-close" update="myDatatable" actionListener="#{lazyTableBean.deleteDataObject()}" />
                        </p:contextMenu>  

                        <p:dataTable id="myDatatable" widgetVar="datatable" lazy="true" liveResize="true" var="row" value="#{lazyTableBean.lazymodel}" draggableColumns="true" paginator="true" rows="15"
                                     paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                                     rowsPerPageTemplate="5,10,15"
                                     rowKey="#{row.uniqueID}"
                                     selection="#{lazyTableBean.selectedDataObject}"
                                     selectionMode="single">  

                            <p:ajax event="rowSelect" listener="#{lazyTableBean.onRowSelect}" update=":form:display" oncomplete="PF('dataViewDialog').show()"/>  
                            <p:columns  value="#{lazyTableBean.lazymodel.columns}" var="column" columnIndexVar="colIndex">
                                <f:facet name="header">  
                                    #{column.header} #{row.uniqueID}
                                </f:facet>  
                                #{row.multimap.get(column.header)}
                            </p:columns>
                        </p:dataTable>  


                        <p:dialog dynamic="true" maximizable="true" minimizable="true"  closeOnEscape="true" header="Selected Row" widgetVar="dataViewDialog" resizable="false"  id="dialog">  

                            <h:panelGrid id="display">  
                                <p:inputTextarea autoResize="false"  cols="20" rows="20" id="orjinalShowedObject" value="#{lazyTableBean.selectedDataObject.orjinalObject}"></p:inputTextarea>
                                <!--
                                <c:forEach items="#{tableBean.selectedDataObject.multimap}" var="selectedObject">
                                    <h:inputText value="#{selectedObject.key}" />
                                    <h:inputText value="#{selectedObject.value}" />
                                </c:forEach> 
                                -->
                                <f:facet name="footer">
                                    <p:commandButton update="myDatatable" id="saveButton" value="Save2" actionListener="#{tableBean.insertObject()}" />         
                                    <p:commandButton id="validateButton" value="Validate"/>    
                                </f:facet>
                            </h:panelGrid>  
                        </p:dialog>  
                    </h:form>   
                </p:layoutUnit>
            </p:layout>
        </h:body>
    </f:view>
</html>